<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <!--      大干燥小干燥 化成高温-->
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2" style="font-size: 16px">重点看板参数(2%)</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config"/>
      </div>
    </div>
  </div>
</template>

<script>
import {getlatestdata} from "@/api";

export default {
  mounted() {
    setInterval(() => {
      getlatestdata({
        "detailShow": false, "retTsType": "ISOStr", "sensors": [
          {
            "nodeId": 497,//DPB-04 //大干燥
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"
          },
          {
            "nodeId": 498,//DPB-05//大干燥
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"

          },
          {
            "nodeId": 499,//DPB-06//大干燥
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"

          },
          {
            "nodeId": 500,//DPB-07//大干燥
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"

          },
          {
            "nodeId": 503,//DPB-16 //化成高温
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"
          },
          {
            "nodeId": 504,//DPB-17//化成高温
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"

          },
          {
            "nodeId": 505,//DPB-18//化成高温
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"

          },
          {
            "nodeId": 506,//DPB-19//化成高温
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"

          },
          {
            "nodeId": 509,//DPB-28
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"

          },
          {
            "nodeId": 508,//DPB-27
            "sensorName": "湿度",
            "sensorType": "monitor",
            "key": "guolu"
          }]
      }).then(res => {
        let arr = []
        res.map(v => {
          v.v = (v.v * 100).toFixed(2) + '%'
          if (v.nodeId == 497) {
            arr.push(['DPB-04', '大干燥', `<span  class='colorGrass'>${v.v}</span>`])
          }
          if (v.nodeId == 498) {
            arr.push(['DPB-05', '大干燥', `<span  class='colorGrass'>${v.v}</span>`])
          }
          if (v.nodeId == 499) {
            arr.push(['DPB-06', '大干燥', `<span  class='colorGrass'>${v.v}</span>`])
          }
          if (v.nodeId == 500) {
            arr.push(['DPB-07', '大干燥', `<span  class='colorGrass'>${v.v}</span>`])
          }
          if (v.nodeId == 503) {
            arr.push(['DPB-16', '化成高温', `<span  class='colorGrass'>${v.v}</span>`])
          }
          if (v.nodeId == 504) {
            arr.push(['DPB-17', '化成高温', `<span  class='colorGrass'>${v.v}</span>`])
          }
          if (v.nodeId == 505) {
            arr.push(['DPB-18', '化成高温', `<span  class='colorGrass'>${v.v}</span>`])
          }
          if (v.nodeId == 506) {
            arr.push(['DPB-19', '化成高温', `<span  class='colorGrass'>${v.v}</span>`])
          }
          if (v.nodeId == 509) {
            arr.push(['DPB-28', '小干燥', `<span  class='colorGrass'>${v.v}</span>`])
          }
          if (v.nodeId == 508) {
            arr.push(['DPB-27', '小干燥', `<span  class='colorGrass'>${v.v}</span>`])
          }
        })
        console.log('arr=>', arr)
        let config = {
          header: ['看板名称', '房间', '湿度'],
          data: [],
          rowNum: 7, //表格行数
          headerHeight: 35,
          headerBGC: '#0f1325', //表头
          oddRowBGC: '#0f1325', //奇数行
          evenRowBGC: '#171c33', //偶数行
          index: false,
          columnWidth: [80],
          align: ['center']
        }
        config.data = arr
        this.config = config
      })
    }, 3000)

  },
  data() {
    return {
      config: {}
    }
  }
}
</script>

<style lang="scss" scoped>
$box-height: 410px;
$box-width: 300px;
#centerRight1 {
  padding: 16px;
  padding-top: 20px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
  }

  .body-box {
    border-radius: 10px;
    overflow: hidden;

    .dv-scr-board {
      width: 270px;
      height: 340px;
    }
  }
}
</style>
